<template>
  <!-- <page-wrap> -->
    <div>
 
  <div class="container">
      <video id="video"></video>
      <div v-if="mask" class="mask"></div>
  </div>
  <h4>识别到的信息：<span style="color: red;">{{ message }}</span></h4>
  <button @click="scanner" style="width: 100px;height: 100px;">扫码</button>&nbsp;
  <button @click="close" style="width: 100px;height: 100px;">关闭</button>&nbsp;
  <button @click="change" style="width: 100px;height: 100px;">切换摄像头</button>&nbsp;

</div>
<!-- </page-wrap> -->
</template>

<script setup>
import { onMounted, ref } from "vue";
import { BrowserMultiFormatReader } from '@zxing/library';

let message = ref('');
let codeReader = null;
let selectedDeviceId = '';
let mask = ref(false);

// function init() {
//   // 识别和处理多种常见的条形码和二维码格式
//   codeReader = new BrowserMultiFormatReader();
//   // 获取当前设备上可用的视频输入设备列表
//   codeReader.getVideoInputDevices().then(videoInputDevices => {
//       message.value = "无置"
//       if (videoInputDevices.length > 1) {
//           // 后缀摄像头（手机）
//           selectedDeviceId = videoInputDevices[1].deviceId;
//           message.value = "后置" +  selectedDeviceId
//           console.log("selectedDeviceId1:",selectedDeviceId); 
//       }else {
//           // 前置摄像头
//           selectedDeviceId = videoInputDevices[0].deviceId;
//           console.log("selectedDeviceId2:",selectedDeviceId);
//           message.value = "前置" +  selectedDeviceId 
//       } 
//       console.log("videoInputDevices:",videoInputDevices); 
//   })
// }

onMounted(() => {
  console.log("onMounted:");
  init();
})

// 切换摄像头
// function change() {
//   codeReader.getVideoInputDevices().then(videoInputDevices => {
//     console.log("videoInputDevices:",videoInputDevices);
//     if (videoInputDevices.length > 1) {
//       if (selectedDeviceId === videoInputDevices[0].deviceId) { 
//         selectedDeviceId = videoInputDevices[1].deviceId;
//         console.log("selectedDeviceId22:",videoInputDevices);
//         message.value = "信息置2：" +  selectedDeviceId
//       } else { 
//         selectedDeviceId = videoInputDevices[0].deviceId;
//         console.log("selectedDeviceId33:",videoInputDevices);
//         message.value = "存储后置2：" +  selectedDeviceId
//       }
//       codeReader.reset();
//       scanner();
//     }
//   });
// }


function init() {
  // 识别和处理多种常见的条形码和二维码格式
  codeReader = new BrowserMultiFormatReader();
  // 获取当前设备上可用的视频输入设备列表
  codeReader.getVideoInputDevices().then(videoInputDevices => {
    message.value = "无置";
    if (videoInputDevices.length > 0) {
      // 尝试通过 label 选择后置摄像头
      let frontCamera = null;
      let backCamera = null;
      videoInputDevices.forEach(device => {
        if (device.label.toLowerCase().includes('back')) {
          backCamera = device;
        } else if (device.label.toLowerCase().includes('front')) {
          frontCamera = device;
        }
      });

      if (backCamera) {
        selectedDeviceId = backCamera.deviceId;
        message.value = "后置" + selectedDeviceId;
        console.log("selectedDeviceId1:", selectedDeviceId);
      } else if (frontCamera) {
        selectedDeviceId = frontCamera.deviceId;
        message.value = "前置" + selectedDeviceId;
        console.log("selectedDeviceId2:", selectedDeviceId);
      } else {
        // 默认选择第一个设备
        selectedDeviceId = videoInputDevices[0].deviceId;
        message.value = "默认" + selectedDeviceId;
        console.log("selectedDeviceId3:", selectedDeviceId);
      }
    }
    console.log("videoInputDevices:", videoInputDevices);
  });
}

function change() {
  codeReader.getVideoInputDevices().then(videoInputDevices => {
    console.log("videoInputDevices:", videoInputDevices);
    if (videoInputDevices.length > 0) {
      let frontCamera = null;
      let backCamera = null;
      videoInputDevices.forEach(device => {
        if (device.label.toLowerCase().includes('back')) {
          backCamera = device;
        } else if (device.label.toLowerCase().includes('front')) {
          frontCamera = device;
        }
      });

      if (selectedDeviceId === (frontCamera ? frontCamera.deviceId : null)) {
        if (backCamera) {
          selectedDeviceId = backCamera.deviceId;
          message.value = "信息置2：" + selectedDeviceId;
        }
      } else {
        if (frontCamera) {
          selectedDeviceId = frontCamera.deviceId;
          message.value = "存储后置2：" + selectedDeviceId;
        }
      }
      codeReader.reset();
      scanner();
    }
  });
}

function scanner() {
  mask.value = true
  message.value = "这种后置：" +  selectedDeviceId
  console.log("selectedDeviceId3:",selectedDeviceId);
  // 自动打开指定的视频输入设备，并实时对视频流中的每一帧图像进行条形码和二维码的解码操作，此方法不是只进行一次解码尝试，而是在视频流持续传输的过程中，不断地对每一帧图像进行解码分析
  codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
      if (result) {
          message.value = result.text;
      }
      if (err) {}
  })
}
function close() {
  codeReader.reset();
  message.value = '';
  mask.value = false;
}
</script>

<style lang="scss" scoped> 
.container {
  width: 100%;
  height: 60vh;
  position: relative;
  margin-top: 10px;
  overflow: hidden;
}
.container > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mask {
  position: absolute;
  left: 15%;
  top: 20%;
  max-width: 100%;
  width: 70%;
  height: 60%;
  border-radius: 2px;
  outline: rgba(0, 0, 0, .25) solid 20vmax;
}
</style>